<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>响应式静态菜鸟教程网页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@media only screen and (max-width:984px) and (min-width:791px) {
				/*.row{
					width: 90%;
				}*/
				.HTML-CSS a{
					width:38%;
				}
				.middle-column-home{
					max-width: 1260px;
				}
				.left-column{
					display: none;
				}
			}
			@media only screen and (max-width:791px){
				.left-column{
					display: none;
				}
				.middle-column-home{
					/*width: 749px;*/
					margin: 0 auto;	
					width: 100%;
				}
				.HTML-CSS a{
					width:40%;
				}
			}
			@media only screen and (max-width:567px ) {
				.nav_content ul li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8){
					display: none;
				}
			}
			@media only screen and (min-width:0px ) and (max-width:517px) {
				.middle-column-home{
					width: 115%;
					margin-left: -42px;
				}
				.continer{
					padding-left: 5px;
				}
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div class="Box" id="miao">
			<div class="Box_Continer">
				<div class="logo">
					<a href="#"></a>
				</div>
				<div class="Input">
					<form action="#" method="post">
						<input type="text" placeholder="搜索... ..."/>
					</form>
				</div>
			</div>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<div class="nav_content">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">菜鸟笔记</a></li>
					<li><a href="#">菜鸟工具</a></li>
					<li><a href="#">参考手册</a></li>
					<li><a href="#">用户笔记</a></li>
					<li><a href="#">测验/考试</a></li>
					<li><a href="#">本地书签</a></li>
					<li><a href="#">登录</a></li>
				</ul>
			</div>
		</div>
		<!-- 主体内容 -->
		<div class="continer">
			<div class="row">
				<div class="col left-column">
					<ul>
						<li><img src="img/三.png"/> 全部教程</li>
						<li><img src="img/转发1.png"/> HTML/CSS</li>
						<li><img src="img/转发2.png"> JavaScript</li>
						<li><img src="img/转发1.png"/> 服务端</li>
						<li><img src="img/转发2.png"> 数据库</li>
						<li><img src="img/转发1.png"/> 移动端</li>
						<li><img src="img/转发2.png"> XML 教程</li>
						<li><img src="img/转发1.png"/> ASP.NET</li>
						<li><img src="img/转发2.png"> Web Service</li>
						<li><img src="img/转发1.png"/> 开发工具</li>
						<li><img src="img/转发2.png"> 网站建设</li>
					</ul>
				</div>
				<div class="col middle-column-home">
					<div class="HTML-CSS">
						<h2><img src="img/item.png">&nbsp;HTML /CSS</h2>
						<ul  class="clear">
							<a href="index.html">
								<li>
									<h4>【学习 HTML】</h4>
									<img src="img/HTML.png" class="codetion"/>
									<strong>HTML，即超文本标记语言（Hyper Text Markup Language）</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 HTML5】</h4>
									<img src="img/HTML5.png" class="codetion"/>
									<strong>HTML5 是下一代 HTML 标准</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 CSS】</h4>
									<img src="img/CSS.png" class="codetion"/>
									<strong>层叠样式表（Cascading StyleSheet）</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 CSS3】</h4>
									<img src="img/CSS3.png" class="codetion"/>
									<strong>CSS3是CSS技术的升级版本</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Bootstrap3】</h4>
									<img src="img/Bootstrap3.png" class="codetion"/>
									<strong>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Bootstrap4】</h4>
									<img src="img/Bootstrap4.png" class="codetion"/>
									<strong>Bootstrap4 目前是 Bootstrap 的最新版本</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Font Awesome】</h4>
									<img src="img/Font-Awesome.png" class="codetion"/>
									<strong>Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Foundation】</h4>
									<img src="img/Foundation.png" class="codetion"/>
									<strong>Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong>
								</li>
							</a>
						</ul>
					</div>
					<div class="HTML-CSS JavaScript">
						<h2><img src="img/item.png">&nbsp;JavaScript</h2>
						<ul class="clear">
							<a href="index.html">
								<li>
									<h4>【学习 JavaScript】</h4>
									<img src="img/JS.png" class="codetion"/>
									<strong>JavaScript 是 Web 的编程语言</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 HTML DOM】</h4>
									<img src="img/HTML.png" class="codetion"/>
									<strong>HTML DOM 定义了访问和操作 HTML 文档的标准方法</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 jQuery】</h4>
									<img src="img/JQ.png" class="codetion"/>
									<strong>jQuery 是一个 JavaScript 库</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 AngularJS】</h4>
									<img src="img/AG.png" class="codetion"/>
									<strong>AngularJS 通过新的属性和表达式扩展了 HTML</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 AngularJS2】</h4>
									<img src="img/AG2.png" class="codetion"/>
									<strong>AngularJS2 是一款开源JavaScript库，由Google维护。</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Vue.js】</h4>
									<img src="img/vUE.png" class="codetion"/>
									<strong>Vue.js 是一套构建用户界面的渐进式框架。</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 React】</h4>
									<img src="img/React.png" class="codetion"/>
									<strong>React 是一个用于构建用户界面的 JAVASCRIPT 库</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 jQuery UI】</h4>
									<img src="img/JQUI.png" class="codetion"/>
									<strong>jQuery UI 是建立在 jQuery上的一组用户界面交互、特效、小部件及主题</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 jQuery EasyUI 】</h4>
									<img src="img/JQeasyUI.png" class="codetion"/>
									<strong>jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Node.js】</h4>
									<img src="img/Node.png" class="codetion"/>
									<strong>Node.js 是运行在服务端的 JavaScript</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 AJAX】</h4>
									<img src="img/AJAX.png" class="codetion"/>
									<strong>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 JSON】</h4>
									<img src="img/Json.png" class="codetion"/>
									<strong>JSON 是存储和交换文本信息的语法</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Highcharts】</h4>
									<img src="img/Highcharts.png" class="codetion"/>
									<strong>Highcharts 是一个用纯JavaScript编写的一个图表库</strong>
								</li>
							</a>
							<a href="index.html">
								<li>
									<h4>【学习 Google 地图】</h4>
									<img src="img/Google.png" class="codetion"/>
									<strong>Google 地图接口使用说明</strong>
								</li>
							</a>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="flex">
			<a href="#miao"><div class="back sou" >∧</div></a>
			<div class="sou">
				<img src="img/weixin.png"/>
			</div>
			<div class="chax">
				<div>微信关注</div>
				<img src="img/qrcode.png"/>
			</div>
		</div>
	</body>
</html>
